<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>手机端的toucch</title>
    <script src="../js/jquery-1.10.1.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .app {
            width: 200px;
            height: 200px;
            background-color: darkgoldenrod;
        }

        .box {
            width: 100%;
            height: 100vh;
            margin-top: 200px;
            background-color: yellowgreen;
            text-align: center;
            line-height: 32px;
            font-size: 25px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="app" class="app" onclick="changeClick()">
        wuhan2105-daydayup
    </div>
    <div id="box" class="box">

    </div>
    <script>
        var app = document.getElementById("app");
        app.onclick = function () {
            console.log("you Click me");
        }

        function changeClick() {
            console.log("wh2105");
            console.log(e.clientX);
        }
        // 事件监听才能存在多个同样的事件
        app.addEventListener("click", changeClick, false)

        var box = document.getElementById("box");
        var startY = 0;
        var endY = 0;
        box.addEventListener("touchstart", function (e) {
            var e = e || window.event
            console.log(e);
            var touch = e.touches[0]
            box.innerHTML = `<p>clientX : ${touch.clientX}</p>` +
                `<p>clientY : ${touch.clientY}</p>` +
                `<p>pageX : ${touch.pageX}</p>` +
                `<p>pageY : ${touch.pageY}</p>` +
                `<p>screenX : ${touch.screenX}</p>` +
                `<p>screenY : ${touch.screenY}</p>`;
            console.log("touchstart");
            startY = touch.clientY

        }, false)
        box.addEventListener("touchmove", function (e) {
            var e = e || window.event
            console.log(e);
            var touch = e.touches[0]
            box.innerHTML = `<p>clientX : ${touch.clientX}</p>` +
                `<p>clientY : ${touch.clientY}</p>` +
                `<p>pageX : ${touch.pageX}</p>` +
                `<p>pageY : ${touch.pageY}</p>` +
                `<p>screenX : ${touch.screenX}</p>` +
                `<p>screenY : ${touch.screenY}</p>` +
                `<p>滑动的高度 ScrollTop : ${touch.pageY - touch.clientY}</p>`;
            console.log("touchmove");
            endY = touch.clientY
        }, false)
        box.addEventListener("touchend", function (e) {
            var e = e || window.event
            console.log(e);
            var touch = e.touches[0]
            console.log("toucend");
            if (startY - endY > 0) {
                box.innerHTML = `<p> 整体往上滑动 up </p>`
            } else {
                box.innerHTML = `<p> 整体往下滑动 down </p>`
            }
        }, false)

        // jquery可以绑定touch系列事件 但是得不到坐标信息 client
        $("#box").on("touchstart", function (e) {
            console.log(e);
            console.log("jquery - touchstart");
        })
    </script>
</body>
<script>
    console.log(document.body.clientWidth);
    console.log(window.devicePixelRatio); /* dpr 设备像素度比 */
</script>

</html>